<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./assets/layui/css/layui.css" />
  </head>
  <body>
    <div class="layui-container">
      <!-- 
        轮播外层类名 layui-carousel
       -->
      <div class="layui-carousel" id="demoCarousel" lay-filter="demoCarouselFilter">
        <!-- 
         设置 carousel-item  属性
         -->
        <div carousel-item>
          <div>page 1</div>
          <div>page 2</div>
          <div>page 3</div>
        </div>
      </div>
    </div>

    <script src="./assets/layui/layui.js"></script>
    <script>
      layui.use(["carousel"], function () {
        var carousel = layui.carousel;
        var carouselInst = carousel.render({
          elem: "#demoCarousel", // 传元素选择器
          width: "100%", // 像素 百分比 默认 600px
          height: "300px", // 像素 百分比 默认 280px
          // full: true, // 是否全屏轮播
          arrow: "hover", //显示箭头 hover（悬停显示）always（始终显示）none（始终不显示）
          indicator: "outside", // 	指示器位置，可选值为：inside（容器内部）outside（容器外部）none（不显示）
          trigger: "hover", //  指示器的触发事件 click hover
          anim: "default", //切换动画方式 default（左右切换）updown（上下切换）fade（渐隐渐显切换）
          autoplay: true, // 自动轮播
          interval: 1000, // 自动切换的时间间隔，单位：ms（毫秒），不能低于800
          index: 1, // 初始开始的条目索引
        });

        //触发轮播切换事件
        carousel.on("change(demoCarouselFilter)", function (obj) {
          console.log(obj.index); //当前条目的索引
          console.log(obj.prevIndex); //上一个条目的索引
          console.log(obj.item); //当前条目的元素对象
        });
        // 重置轮播
        // carouselInst.reload({});
      });
    </script>
  </body>
</html>
